<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../dist/avalon.js"></script>
        <script>

            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            function shuffle(arr) {

                var collection = arr,
                        len = arr.length,
                        rng = Math.random,
                        random,
                        temp;

                while (len) {
                    random = Math.floor(rng() * len);
                    len -= 1;
                    temp = collection[len];
                    collection[len] = collection[random];
                    collection[random] = temp;
                }

                return collection;
            }

            avalon.component('ms-pager', {
                template: heredoc(function () {
                    /*
                     <ul class="list-unstyled">
                     <li><a href="javascript:;">首页</a></li>
                     <li><a href="javascript:;">上一页</a></li>
                     <li :for="el in @pageList" ms-click="@alert(el)">
                     <a href="javascript:;">{{el}}</a>
                     </li>
                     <li><a href="javascript:;">下一页</a></li>
                     <li><a href="javascript:;">末页</a></li>
                     <li :if="@toggle"><a href="javascript:;">{{@pageSize}}</a></li>
                     <li>共<span :on-click="@update">{{@totalPages}}</span>页</li>
                     </ul>
                     */
                }),
                defaults: {
                    totalPages: 21,
                    pageSize: 5,
                    pageList: [1, 2, 3, 4, 5, 6],
                    alert: function (e) {
                        console.log(e)
                    },
                    onViewChange: function () {
                        console.log('viewchange!!!!')
                    },
                    update: function () {
                       this.pageList = shuffle(this.pageList.slice(0))
                    }
                }
            })
            var vm = avalon.define({
                $id: 'test',
                bbb: "测试",
                toggle: false,
                config: {
                    totalPages: 33,
                    pageSize: 6
                }
            });
        </script>
    </head>
    <body>
        <div ms-controller="test">
            <ms-pager :widget="@config"></ms-pager>
        </div>
    </body>
</html>